<template>
	<view class="goods-list-container">
		<!-- 加载中蒙版 -->
		<qmy-mask-load :dataLoaded="dataLoaded"></qmy-mask-load>

		<!-- 顶部导航栏 -->
		<qmy-custom-navbar zIndex="4" :title="'商品列表'"></qmy-custom-navbar>

		<view :style="{top: menuObject.top + menuObject.height + 8 + 'px'}" class="fixed-top-wrap">
			<!-- 搜索框 -->
			<view class="search-section">
				<view class="search-input-box">
					<text class="iconfont ic-sousuo fs-40 col-00ba31 mr-10"></text>
					<input type="text" v-model="searchKeyword" placeholder="搜索商品" @confirm="handleSearch"
						placeholder-class="search-placeholder" />
					<text class="iconfont ic-qingchu fs-40 ml-10 col-0a2e36" v-if="searchKeyword"
						@click="clearSearch"></text>
				</view>
			</view>
			<!-- 分类标签页 -->
			<view class="fixed-tabs-wrap">
				<scroll-view scroll-x class="category-tabs" :show-scrollbar="false">
					<view class="category-container">
						<view class="tab-item" :class="{'active': currentCategory === 'all'}"
							@click="selectCategory('all')">全部</view>
						<view class="tab-item" v-for="(item, index) in categoryList" :key="index"
							:class="{'active': currentCategory === item._id}" @click="selectCategory(item._id)">
							{{item.name}}
						</view>
					</view>
				</scroll-view>
				<view class="filter-btn" @click="openFilterDrawer">
					<text class="iconfont ic-shaixuan1"></text>
					<text class="filter-text">筛选</text>
				</view>
			</view>
		</view>

		<!-- 商品列表（瀑布流） -->
		<scroll-view class="goods-content" scroll-y @scrolltolower="loadMore" refresher-enabled
			:refresher-triggered="isRefreshing" @refresherrefresh="onRefresh"
			:style="{top: menuObject.top + menuObject.height + 8 + 'px'}">
			<view class="waterfall-container" v-if="goodsList.length > 0">
				<view class="waterfall-column">
					<view class="waterfall-item" v-for="(item, index) in leftColumnProducts" :key="index"
						@click="$NavigateTo(`/pages/detail/goodsDetail?id=${item._id}`)">
						<image v-if="item.goods_banner[0].type == 'image'" :src="item.goods_banner[0].url"
							mode="widthFix" class="waterfall-image" />
						<video v-else :src="item.goods_banner[0].url" mode="widthFix" class="waterfall-image"
							object-fit="cover" enable-play-gesture muted loop :show-center-play-btn="false"
							:controls="false" :enable-progress-gesture="false" :show-fullscreen-btn="false"
							:show-play-btn="false" :show-loading="false" />
						<view class="waterfall-info">
							<text class="waterfall-name">{{ item.name }}</text>
							<view class="waterfall-price-box">
								<view class="price-wrapper">
									<text class="product-price">¥{{ item.default_price /100 }}</text>
									<text class="product-original-price"
										v-if="item.original_price">¥{{ item.original_price /100 }}</text>
								</view>
								<view class="cart-icon" @click.stop="addToCollect(item)">
									<view class="iconfont fs-32 col-f"
										:class="item.collect_user_id.includes(userInfo.id)?'ic-favorite-s':'ic-favorite-line'">
									</view>
								</view>
							</view>
							<view class="waterfall-tags" v-if="item.tags && item.tags.length">
								<text class="waterfall-tag" v-for="(tag, tagIndex) in item.tags"
									:key="tagIndex">{{ tag }}</text>
							</view>
						</view>
					</view>
				</view>

				<view class="waterfall-column">
					<view class="waterfall-item" v-for="(item, index) in rightColumnProducts" :key="index"
						@click="$NavigateTo(`/pages/detail/goodsDetail?id=${item._id}`)">
						<image v-if="item.goods_banner[0].type == 'image'" :src="item.goods_banner[0].url"
							mode="widthFix" class="waterfall-image" />
						<video v-else :src="item.goods_banner[0].url" mode="widthFix" class="waterfall-image"
							object-fit="cover" enable-play-gesture muted loop :show-center-play-btn="false"
							:controls="false" :enable-progress-gesture="false" :show-fullscreen-btn="false"
							:show-play-btn="false" :show-loading="false" />
						<view class="waterfall-info">
							<text class="waterfall-name">{{ item.name }}</text>
							<view class="waterfall-price-box">
								<view class="price-wrapper">
									<text class="product-price">¥{{ item.default_price /100 }}</text>
									<text class="product-original-price"
										v-if="item.original_price">¥{{ item.original_price/100 }}</text>
								</view>
								<view class="cart-icon" @click.stop="addToCollect(item)">
									<view class="iconfont fs-32 col-f"
										:class="item.collect_user_id.includes(userInfo.id)?'ic-favorite-s':'ic-favorite-line'">
									</view>
								</view>
							</view>
							<view class="waterfall-tags" v-if="item.tags && item.tags.length">
								<text class="waterfall-tag" v-for="(tag, tagIndex) in item.tags"
									:key="tagIndex">{{ tag }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<qmy-logo :loading="load" v-if="goodsList.length && dataLoaded"></qmy-logo>
			<!-- 空状态 -->
			<view class="empty-state" v-if="goodsList.length === 0 && dataLoaded">
				<image class="empty-image"
					src="https://gd-hbimg.huaban.com/7155c543aa4e1dc4a7bb6413a85ed1abe588fb4a1537-Tu5B7V_fw1200webp"
					mode="aspectFit"></image>
				<view class="empty-text">暂无商品数据</view>
			</view>
		</scroll-view>

		<!-- 筛选抽屉 -->
		<uni-drawer ref="filterDrawer" mode="right" :mask-click="true" :width="280">
			<view class="filter-drawer-content" :style="{paddingTop: menuObject.top + menuObject.height + 8 + 'px'}">
				<!-- 商品属性 -->
				<view class="filter-section-drawer">
					<view class="section-title">商品属性</view>
					<view class="attribute-options">
						<view class="attribute-tag" :class="{'active': featureFilter.isNew}"
							@click="toggleFeature('isNew')">新品</view>
						<view class="attribute-tag" :class="{'active': featureFilter.isRecommend}"
							@click="toggleFeature('isRecommend')">精选</view>
						<view class="attribute-tag" :class="{'active': featureFilter.isHot}"
							@click="toggleFeature('isHot')">热销</view>
					</view>
				</view>

				<!-- 排序方式 -->
				<view class="filter-section-drawer">
					<view class="section-title">排序方式</view>
					<view class="sort-options">
						<view class="sort-item" :class="{'active': currentSort === 'default'}"
							@click="selectSort('default')">默认排序</view>
						<view class="sort-item" :class="{'active': currentSort === 'sales'}"
							@click="selectSort('sales')">销量优先</view>
						<view class="sort-item" :class="{'active': currentSort === 'time'}" @click="selectSort('time')">
							最新上架</view>
						<view class="sort-item" :class="{'active': currentSort === 'price_asc'}"
							@click="selectSort('price_asc')">价格从低到高</view>
						<view class="sort-item" :class="{'active': currentSort === 'price_desc'}"
							@click="selectSort('price_desc')">价格从高到低</view>
					</view>
				</view>

				<!-- 价格区间 -->
				<view class="filter-section-drawer">
					<view class="section-title">价格区间</view>
					<view class="price-input-row">
						<view class="price-input-box">
							<text class="price-symbol">¥</text>
							<input type="number" v-model="minPrice" placeholder="最低价" />
						</view>
						<text class="price-divider">-</text>
						<view class="price-input-box">
							<text class="price-symbol">¥</text>
							<input type="number" v-model="maxPrice" placeholder="最高价" />
						</view>
					</view>
					<view class="price-quick-select">
						<view class="price-tag" @click="setPriceRange(0, 100)">0-100元</view>
						<view class="price-tag" @click="setPriceRange(100, 300)">100-300元</view>
						<view class="price-tag" @click="setPriceRange(300, 500)">300-500元</view>
						<view class="price-tag" @click="setPriceRange(500, 1000)">500-1000元</view>
						<view class="price-tag" @click="setPriceRange(1000, null)">1000元以上</view>
					</view>
				</view>

				<!-- 底部按钮 -->
				<view class="drawer-buttons">
					<view class="reset-btn" @click="resetAllFilters">重置</view>
					<view class="confirm-btn" @click="applyFilters">确定</view>
				</view>
			</view>
		</uni-drawer>
	</view>
</template>

<script>
	import {
		store
	} from '@/utils/store.js'

	export default {
		data() {
			return {
				// #ifdef MP-WEIXIN
				menuObject: uni.getMenuButtonBoundingClientRect(),
				// #endif
				// #ifndef MP-WEIXIN
				menuObject: 0,
				// #endif
				dataLoaded: true,
				listTitle: '商品列表',
				listType: 'all', // 列表类型：all, special, new, hot

				// 搜索相关
				searchKeyword: '',

				// 标签页相关
				tabs: [{
					name: '全部',
					type: 'all'
				}, {
					name: '精选',
					type: 'special'
				}, {
					name: '热销',
					type: 'hot'
				}, {
					name: '新品',
					type: 'new'
				}],
				currentTab: 0,

				// 分类筛选
				categoryList: [
					{
						_id: 'cat001',
						name: '户外装备'
					},
					{
						_id: 'cat002',
						name: '运动服饰'
					},
					{
						_id: 'cat003',
						name: '健身器材'
					},
					{
						_id: 'cat004',
						name: '营养保健'
					},
					{
						_id: 'cat005',
						name: '电子产品'
					}
				],
				currentCategory: 'all',

				// 排序筛选
				currentSort: 'default',

				// 价格筛选
				minPrice: '',
				maxPrice: '',
				priceRange: null,

				// 特性筛选
				featureFilter: {
					isNew: false,
					isRecommend: false,
					isHot: false
				},

				// 商品列表
				goodsList: [
					{
						_id: 'goods001',
						name: '专业户外登山包 大容量防水背包',
						default_price: 25800, // 258元
						original_price: 32800, // 328元
						goods_banner: [{
							type: 'image',
							url: 'https://picsum.photos/300/400?random=1'
						}],
						tags: ['防水', '大容量', '专业'],
						collect_user_id: ['user001'],
						is_new: true,
						is_recommend: true,
						is_hot: false
					},
					{
						_id: 'goods002',
						name: '智能运动手表 心率监测GPS定位',
						default_price: 89900, // 899元
						original_price: 119900, // 1199元
						goods_banner: [{
							type: 'image',
							url: 'https://picsum.photos/300/350?random=2'
						}],
						tags: ['智能', 'GPS', '心率监测'],
						collect_user_id: [],
						is_new: false,
						is_recommend: true,
						is_hot: true
					},
					{
						_id: 'goods003',
						name: '轻量化帐篷 双人四季户外露营',
						default_price: 45600, // 456元
						original_price: null,
						goods_banner: [{
							type: 'image',
							url: 'https://picsum.photos/300/380?random=3'
						}],
						tags: ['轻量化', '四季', '双人'],
						collect_user_id: ['user001', 'user002'],
						is_new: false,
						is_recommend: false,
						is_hot: true
					},
					{
						_id: 'goods004',
						name: '专业跑步鞋 透气减震运动鞋',
						default_price: 32800, // 328元
						original_price: 45800, // 458元
						goods_banner: [{
							type: 'image',
							url: 'https://picsum.photos/300/320?random=4'
						}],
						tags: ['透气', '减震', '专业'],
						collect_user_id: [],
						is_new: true,
						is_recommend: false,
						is_hot: false
					},
					{
						_id: 'goods005',
						name: '户外冲锋衣 防风防水透气外套',
						default_price: 28800, // 288元
						original_price: 39800, // 398元
						goods_banner: [{
							type: 'image',
							url: 'https://picsum.photos/300/420?random=5'
						}],
						tags: ['防风', '防水', '透气'],
						collect_user_id: ['user003'],
						is_new: false,
						is_recommend: true,
						is_hot: false
					},
					{
						_id: 'goods006',
						name: '折叠式野餐桌 便携户外桌椅套装',
						default_price: 15800, // 158元
						original_price: null,
						goods_banner: [{
							type: 'image',
							url: 'https://picsum.photos/300/360?random=6'
						}],
						tags: ['折叠', '便携', '套装'],
						collect_user_id: [],
						is_new: true,
						is_recommend: false,
						is_hot: true
					},
					{
						_id: 'goods007',
						name: '多功能户外工具刀 不锈钢折叠刀',
						default_price: 8800, // 88元
						original_price: 12800, // 128元
						goods_banner: [{
							type: 'image',
							url: 'https://picsum.photos/300/300?random=7'
						}],
						tags: ['多功能', '不锈钢', '折叠'],
						collect_user_id: ['user001', 'user004'],
						is_new: false,
						is_recommend: false,
						is_hot: false
					},
					{
						_id: 'goods008',
						name: 'LED头灯 超亮充电式户外照明',
						default_price: 6800, // 68元
						original_price: 9800, // 98元
						goods_banner: [{
							type: 'image',
							url: 'https://picsum.photos/300/340?random=8'
						}],
						tags: ['LED', '充电式', '超亮'],
						collect_user_id: [],
						is_new: false,
						is_recommend: true,
						is_hot: true
					},
					{
						_id: 'goods009',
						name: '保温水壶 不锈钢真空保温杯',
						default_price: 12800, // 128元
						original_price: 16800, // 168元
						goods_banner: [{
							type: 'image',
							url: 'https://picsum.photos/300/390?random=9'
						}],
						tags: ['保温', '不锈钢', '真空'],
						collect_user_id: ['user002', 'user005'],
						is_new: true,
						is_recommend: false,
						is_hot: false
					},
					{
						_id: 'goods010',
						name: '户外睡袋 轻量化保暖防潮睡袋',
						default_price: 18800, // 188元
						original_price: 25800, // 258元
						goods_banner: [{
							type: 'image',
							url: 'https://picsum.photos/300/370?random=10'
						}],
						tags: ['轻量化', '保暖', '防潮'],
						collect_user_id: [],
						is_new: false,
						is_recommend: true,
						is_hot: false
					}
				],
				page: 0,
				pageSize: 10,
				hasMore: true,
				isRefreshing: false,

				// 内容高度
				contentHeight: 0,

				load: false, // 是否加载中
			}
		},
		computed: {
			userInfo() {
				// 返回写死的用户信息用于测试
				return {
					id: 'current_user',
					name: '测试用户',
					avatar: 'https://picsum.photos/200/200?random=100'
				}
				// return this.$store.state.userInfo;;
			},
			// 瀑布流左右两列数据
			leftColumnProducts() {
				return this.goodsList.filter((_, index) => index % 2 === 0);
			},
			rightColumnProducts() {
				return this.goodsList.filter((_, index) => index % 2 === 1);
			},
			// 构建查询参数
			queryParams() {
				const params = {
					page: this.page,
					pageSize: this.pageSize,
					keyword: this.searchKeyword,
					sort: this.currentSort
				};

				// 添加分类筛选
				if (this.currentCategory !== 'all') {
					params.category_id = this.currentCategory;
				}

				// 添加价格筛选
				if (this.priceRange) {
					params.price_range = this.priceRange;
				}

				// 添加特性筛选
				const features = {};
				if (this.featureFilter.isNew) features.is_new = true;
				if (this.featureFilter.isRecommend) features.is_recommend = true;
				if (this.featureFilter.isHot) features.is_hot = true;

				if (Object.keys(features).length > 0) {
					params.features = features;
				}

				// 添加特性筛选
				if (this.featureFilter.isNew) params.is_new = true;
				if (this.featureFilter.isRecommend) params.is_recommend = true;
				if (this.featureFilter.isHot) params.is_hot = true;

				return params;
			}
		},
		onLoad(options) {
			// 处理路由参数
			if (options.type) {
				// 处理列表类型
				this.listType = options.type;
				this.setTabByType(options.type);
			}

			// 处理列表标题
			if (options.title) {
				this.listTitle = options.title;
			}

			// 处理分类筛选
			if (options.category_id) {
				this.currentCategory = options.category_id;
			}

			// 使用写死的数据，注释掉API调用
			// this.getGoodsCategoryList();
			// this.loadGoodsList();
		},
		methods: {

			// 设置当前标签
			setTabByType(type) {
				const index = this.tabs.findIndex(tab => tab.type === type);
				if (index > -1) {
					this.currentTab = index;
				}
			},

			// 获取商品分类列表（已使用写死数据）
			getGoodsCategoryList() {
				// 使用写死的数据，不需要API调用
				console.log('使用写死的分类数据');
			},

			// 加载商品列表（已使用写死数据）
			loadGoodsList(type = 'refresh') {
				if (type === 'refresh') {
					this.page = 0;
					this.hasMore = true;
				}
				this.load = true;
				
				// 模拟API调用延迟
				setTimeout(() => {
					this.load = false;
					this.dataLoaded = true;
					this.isRefreshing = false;
					
					if (type === 'more') {
						// 模拟加载更多，但没有更多数据
						this.hasMore = false;
						uni.showToast({
							title: '没有更多商品了',
							icon: 'none'
						});
					} else {
						uni.showToast({
							title: '加载成功',
							icon: 'success'
						});
					}
				}, 500);
			},

			// 搜索相关方法
			handleSearch() {
				uni.showToast({
					title: `搜索: ${this.searchKeyword}`,
					icon: 'none'
				});
				this.loadGoodsList();
			},

			clearSearch() {
				this.searchKeyword = '';
				uni.showToast({
					title: '已清空搜索',
					icon: 'success'
				});
				this.loadGoodsList();
			},

			// 标签切换
			handleTabChange(index) {
				if (this.currentTab === index) return;
				this.currentTab = index;
				const tabName = this.tabs[index].name;
				uni.showToast({
					title: `切换到: ${tabName}`,
					icon: 'none'
				});
				this.loadGoodsList();
			},

			// 选择分类
			selectCategory(categoryId) {
				if (this.currentCategory === categoryId) return;
				this.currentCategory = categoryId;
				const categoryName = categoryId === 'all' ? '全部' : 
					this.categoryList.find(cat => cat._id === categoryId)?.name || '未知分类';
				uni.showToast({
					title: `选择分类: ${categoryName}`,
					icon: 'none'
				});
				this.loadGoodsList();
			},

			// 选择排序方式
			selectSort(sort) {
				if (this.currentSort === sort) return;
				this.currentSort = sort;
				
				const sortNames = {
					'default': '默认排序',
					'sales': '销量优先',
					'time': '最新上架',
					'price_asc': '价格从低到高',
					'price_desc': '价格从高到低'
				};
				
				uni.showToast({
					title: `排序: ${sortNames[sort]}`,
					icon: 'none'
				});

				// 如果是在抽屉中选择，不立即刷新
				if (!this.$refs.filterDrawer.visibleSync) {
					this.loadGoodsList();
				}
			},

			// 切换价格排序
			togglePriceSort() {
				if (this.currentSort === 'price_asc') {
					this.currentSort = 'price_desc';
					uni.showToast({
						title: '价格从高到低',
						icon: 'none'
					});
				} else {
					this.currentSort = 'price_asc';
					uni.showToast({
						title: '价格从低到高',
						icon: 'none'
					});
				}
				this.loadGoodsList();
			},

			// 打开筛选抽屉
			openFilterDrawer() {
				this.$refs.filterDrawer.open();
			},

			// 关闭筛选抽屉
			closeFilterDrawer() {
				this.$refs.filterDrawer.close();
			},

			// 应用筛选条件
			applyFilters() {
				// 确认当前价格范围
				this.confirmPriceFilter();
				// 关闭抽屉
				this.closeFilterDrawer();
				// 刷新商品列表
				uni.showToast({
					title: '筛选条件已应用',
					icon: 'success'
				});
				this.loadGoodsList();
			},

			// 重置所有筛选
			resetAllFilters() {
				// 重置排序
				this.currentSort = 'default';
				// 重置价格范围
				this.resetPriceFilter();
				// 重置商品属性
				this.featureFilter.isNew = false;
				this.featureFilter.isRecommend = false;
				this.featureFilter.isHot = false;
				
				uni.showToast({
					title: '筛选条件已重置',
					icon: 'success'
				});
			},

			// 切换商品特性筛选
			toggleFeature(feature) {
				this.featureFilter[feature] = !this.featureFilter[feature];
				
				const featureNames = {
					'isNew': '新品',
					'isRecommend': '精选',
					'isHot': '热销'
				};
				
				const status = this.featureFilter[feature] ? '已选择' : '已取消';
				uni.showToast({
					title: `${featureNames[feature]} ${status}`,
					icon: 'none'
				});
			},

			setPriceRange(min, max) {
				this.minPrice = min;
				this.maxPrice = max ? max : '';
				
				const rangeText = max ? `${min}-${max}元` : `${min}元以上`;
				uni.showToast({
					title: `价格范围: ${rangeText}`,
					icon: 'none'
				});
			},

			resetPriceFilter() {
				this.minPrice = '';
				this.maxPrice = '';
				this.priceRange = null;
			},

			confirmPriceFilter() {
				// 将字符串转换为数字
				const min = this.minPrice === '' ? null : Number(this.minPrice);
				const max = this.maxPrice === '' ? null : Number(this.maxPrice);

				// 验证价格范围
				if (min !== null && max !== null && min > max) {
					return uni.showToast({
						title: '最低价不能大于最高价',
						icon: 'none'
					});
				}

				// 设置价格范围
				if (min !== null || max !== null) {
					this.priceRange = {
						min: min,
						max: max
					};
				} else {
					this.priceRange = null;
				}
			},

			// 收藏商品
			addToCollect(data) {
				// 收藏节流
				this.$debounce(() => {
					// 震动反馈
					uni.vibrateShort();
					
					// 更新收藏状态
					this.goodsList.forEach(item => {
						if (item._id == data._id) {
							if (item.collect_user_id.includes(this.userInfo.id)) {
								// 取消收藏
								item.collect_user_id.splice(item.collect_user_id.indexOf(this.userInfo.id), 1);
								uni.showToast({
									title: '已取消收藏',
									icon: 'success'
								});
							} else {
								// 添加收藏
								item.collect_user_id.push(this.userInfo.id);
								uni.showToast({
									title: '收藏成功',
									icon: 'success'
								});
							}
						}
					});
				}, 1000, true, "addToCollect")
			},

			// 加载更多
			loadMore() {
				if (!this.hasMore) {
					return uni.showToast({
						title: '没有更多商品了',
						icon: 'none'
					});
				}
				this.page++;
				this.loadGoodsList('more');
			},

			// 下拉刷新
			onRefresh() {
				this.isRefreshing = true;
				this.loadGoodsList();
			}
		}
	}
</script>

<style lang="scss">
	.goods-list-container {
		min-height: 100vh;
		background-color: #f5f7fa;
		display: flex;
		flex-direction: column;
	}

	.fixed-top-wrap {
		position: fixed;
		z-index: 3;
		width: 100%;
		background: #fff;
		height: 210rpx;
		overflow: hidden;
	}

	/* 搜索框样式 */
	.search-section {
		background: #ffffff;
		padding: 20rpx;
		padding-bottom: 0rpx;
		z-index: 1;
	}

	.search-input-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #f5f5f5;
		border-radius: 36rpx;
		padding: 0 24rpx;
		height: 65rpx;

		input {
			flex: 1;
			height: 100%;
			font-size: 28rpx;
		}

		.search-placeholder {
			color: #999;
		}
	}

	/* 分类标签页样式 */
	.fixed-tabs-wrap {
		display: flex;
		flex-direction: row;
		width: 100%;
		align-items: center;
		background: #ffffff;
		padding: 20rpx;
	}

	.category-tabs {
		display: flex;
		overflow-x: auto;
		white-space: nowrap;
		padding: 20rpx 0;
		padding-right: 20rpx;

		&::-webkit-scrollbar {
			display: none;
		}
	}

	.category-container {
		display: flex;
		align-items: center;
	}

	.tab-item {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 12rpx 24rpx;
		margin-right: 20rpx;
		font-size: 26rpx;
		color: #666;
		background: #f7f7f7;
		border-radius: 30rpx;
		transition: all 0.2s;

		&.active {
			color: #ffffff;
			background: #14cc60;
		}
	}

	.filter-btn {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-shrink: 0;
		background: #14cc60;
		width: 130rpx;
		height: 55rpx;
		border-radius: 30rpx;
		margin-right: 10rpx;

		.iconfont {
			font-size: 30rpx;
			color: #fff;
			margin-right: 5rpx;
		}

		.filter-text {
			font-size: 26rpx;
			color: #fff;
		}
	}

	/* 商品列表样式 */
	.goods-content {
		flex: 1;
		padding: 20rpx;
		position: fixed;
		padding-top: 230rpx;
		bottom: 0;
		top: 0;
		z-index: 1;
	}

	/* 瀑布流样式，复用原有的styles */
	.waterfall-container {
		display: flex;
		justify-content: space-between;
	}

	.waterfall-column {
		width: 48.5%;
	}

	.waterfall-item {
		position: relative;
		border-radius: 16rpx;
		overflow: hidden;
		background-color: #fff;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
		margin-bottom: 20rpx;
		transition: transform 0.2s, box-shadow 0.2s;
	}

	.waterfall-item:active {
		transform: scale(0.98);
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	}

	.waterfall-image {
		width: 100%;
		border-radius: 16rpx 16rpx 0 0;
	}

	.waterfall-info {
		padding: 16rpx;
	}

	.waterfall-name {
		font-size: 26rpx;
		color: #000000;
		font-weight: 500;
		line-height: 1.4;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.waterfall-price-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 12rpx;
	}

	.price-wrapper {
		display: flex;
		align-items: baseline;
	}

	.product-price {
		font-size: 30rpx;
		font-weight: bold;
		color: #14cc60;
	}

	.product-original-price {
		margin-left: 10rpx;
		font-size: 24rpx;
		color: #999;
		text-decoration: line-through;
	}

	.cart-icon {
		background-color: #14cc60;
		border-radius: 50%;
		height: 45rpx;
		width: 45rpx;
		line-height: 45rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 4rpx 8rpx rgba(20, 204, 96, 0.2);
		transition: transform 0.2s;
	}

	.cart-icon:active {
		transform: scale(0.9);
	}

	.waterfall-tags {
		display: flex;
		flex-wrap: wrap;
		margin-top: 12rpx;
	}

	.waterfall-tag {
		font-size: 20rpx;
		color: #14cc60;
		background-color: rgba(20, 204, 96, 0.1);
		padding: 4rpx 8rpx;
		border-radius: 4rpx;
		margin-right: 10rpx;
		margin-bottom: 10rpx;
	}

	/* 价格筛选弹窗样式 */
	.price-filter-popup {
		background: #ffffff;
		border-radius: 30rpx 30rpx 0 0;
		padding: 30rpx;
		padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
	}

	.popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.popup-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.close-icon {
		font-size: 36rpx;
		color: #999;
	}

	.price-input-row {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.price-input-box {
		flex: 1;
		display: flex;
		align-items: center;
		background: #f5f5f5;
		border-radius: 10rpx;
		padding: 16rpx;

		.price-symbol {
			color: #666;
			margin-right: 8rpx;
		}

		input {
			flex: 1;
			font-size: 28rpx;
		}
	}

	.price-divider {
		padding: 0 20rpx;
		color: #999;
	}

	.price-quick-select {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 40rpx;
	}

	.price-tag {
		padding: 12rpx 24rpx;
		background: #f5f5f5;
		color: #666;
		font-size: 26rpx;
		border-radius: 10rpx;
		margin-right: 20rpx;
		margin-bottom: 20rpx;

		&:active {
			background: #eaeaea;
		}
	}

	.popup-buttons {
		display: flex;
		justify-content: space-between;
	}

	.reset-btn,
	.confirm-btn {
		flex: 1;
		height: 70rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		border-radius: 12rpx;
	}

	.reset-btn {
		margin-right: 20rpx;
		border: 2rpx solid #ddd;
		color: #666;
	}

	.confirm-btn {
		background: #14cc60;
		color: #fff;
	}

	/* 抽屉样式 */
	.filter-drawer-content {
		padding: 30rpx;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.drawer-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 40rpx;
	}

	.drawer-title {
		font-size: 34rpx;
		font-weight: bold;
		color: #333;
	}

	.drawer-close {
		font-size: 36rpx;
		color: #999;
	}

	.filter-section-drawer {
		margin-bottom: 40rpx;
	}

	.section-title {
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
	}

	.attribute-options {
		display: flex;
		flex-wrap: wrap;
	}

	.attribute-tag {
		width: 120rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		background: #f5f5f5;
		color: #666;
		font-size: 26rpx;
		border-radius: 12rpx;
		margin-right: 20rpx;
		margin-bottom: 20rpx;

		&.active {
			background: #14cc60;
			color: #fff;
		}

		&:active {
			opacity: 0.8;
		}
	}

	.sort-options {
		display: flex;
		flex-direction: column;
	}

	.sort-item {
		height: 80rpx;
		line-height: 80rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
		color: #333;
		border-bottom: 1rpx solid #f5f5f5;

		&.active {
			color: #14cc60;
			font-weight: bold;
		}

		&:active {
			background: #f9f9f9;
		}
	}

	.drawer-buttons {
		margin-top: auto;
		display: flex;
		justify-content: space-between;
		padding-bottom: env(safe-area-inset-bottom);
	}

	/* 空状态 */
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 100rpx 0;

		.empty-image {
			width: 200rpx;
			height: 200rpx;
			margin-bottom: 30rpx;
		}

		.empty-text {
			font-size: 28rpx;
			color: #999;
		}
	}
</style>
